{% extends '@WebsiteBundle/layout/baselayout.html.twig' %}
{% block seo_descr %}
	{{ seoDescr }}
{% endblock %}
{% block seo_kw %}
	{{ seoKw }}
{% endblock %}
{% block body_main %}
	{{ parent() }}
	<div class="page">
		{{ render(path('app_header', {"route":route})) }}
		<div class="page-wrapper">
			<div class="page-body">
				<div class="container-xl">
					<div class="row row-cards">
						<div class="col-sm-12 col-lg-8">
							<div class="card card-sm p-0">
								<div class="card-body">
									{% if banners %}
										<div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
											<div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
												{% for item in banners %}
													<button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="{{ loop.index0 }}" {% if loop.first %} class="active" {% endif %}></button>
												{% endfor %}
											</div>
											<div class="carousel-inner">
												{% for item in banners %}
													<div class="carousel-item active">
														<a href="{{ item['url'] }}">
															<img class="d-block w-100" alt="" src="{{ json_get(item['bannerImg']) }}"/>
														</a>
													</div>
												{% endfor %}
											</div>
										</div>
									{% else %}
										{% include '@WebsiteBundle/empty.html.twig' %}
									{% endif %}
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-lg-4 d-none d-md-block">
							<div class="row row-cards">
								<div class="col-12">
									<div class="card" style="height:120px;">
										<div class="card-header"><h2 class="card-title"><strong>每日一言</strong></h2></div>
										<div class="card-body">
											<div class="text-muted tracking-wide">{{ oneSentenceADay }}</div>
										</div>
									</div>
								</div>
								<div class="col-12">
									<div class="card">
										<div class="card-header">
											<h2 class="card-title"><strong>公告</strong></h2>
										</div>
										<div class="card-body">
											{% if notices %}
												{% for item in notices %}
													<p class="tracking-wide h5">
														<a href="{{ path('app_news_detail', {id: item['id']}) }}">{{ item['title'] }}</a>
													</p>
												{% endfor %}
											{% else %}
												{% include '@WebsiteBundle/empty.html.twig' %}
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-lg-12">
							<div class="row row-deck row-cards">
								<div class="col-sm-11">
									<h2 class="page-title">
										精选教程
									</h2>
								</div>
								<div class="col-sm-1">
									<a href="{{ path('app_news') }}" class="h5 text-muted just">查看更多 >></a>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-lg-12">
							{% if newestTutorials %}
								<div class="row row-deck row-cards">
									{% for item in newestTutorials %}
										<div class="col-sm-12 col-lg-6">
											<div class="card">
												<div class="row row-0">
													<div class="col-3">
														<img src="{{ json_get(item['bigImg']) }}" class="w-100 h-100 object-cover card-img-start" alt="{{ item['name'] }}">
													</div>
													<div class="col">
														<div class="card-body">
															<a href="{{ path('app_tutorial_detail', {id:item['id']}) }}" class="card-title">{{ item['name'] }}</a>
															<p class="text-muted slice">{{ item['descr']|markdown_to_html|html2txt }}</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							{% else %}
								{% include '@WebsiteBundle/empty.html.twig' %}
							{% endif %}
						</div>
						<div class="col-sm-12 col-lg-12">
							<div class="row row-deck row-cards">
								<div class="col-sm-12 col-lg-8">
									<div class="row row-deck row-cards">
										<div class="col-sm-10">
											<h2 class="page-title">
												精选文章
											</h2>
										</div>
										<div class="col-sm-2">
											<a href="{{ path('app_news') }}" class="h5 text-muted">查看更多 >></a>
										</div>
										<div class="col-sm-12 col-lg-12">
											{% if news %}
												<div class="row row-deck row-cards">
													{% for item in news %}
														{% if item['img'] %}
															<div class="col-sm-12 col-lg-12">
																<div class="card card-borderless">
																	<div class="row row-0">
																		<div class="col-3 order-md-last">
																			<img src="{{ json_get(item['img']) }}" class="w-100 h-100 object-cover card-img-start" alt="{{ item['title'] }}">
																		</div>
																		<div class="col">
																			<div class="card-body">
																				<h3 class="card-title d-flex w-100 justify-content-between mt-1">
																					<a href="{{ path('app_news_detail', {id:item['id']}) }}" class="h3 tracking-wide mb-1">{{ item['title'] }}</a>
																					<small class="text-muted">{{ item['createdAtTime']|qtime }}</small>
																				</h3>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														{% else %}
															<div class="col-sm-12 col-lg-12">
																<div class="card card-borderless">
																	<div class="row row-0">
																		<div class="col-auto">
																			<div class="card-body">
																				<h3 class="card-title d-flex w-100 justify-content-between mt-1">
																					<a href="{{ path('app_news_detail', {id:item['id']}) }}" class="h3 tracking-wide mb-1">{{ item['title'] }}</a>
																					<small class="text-muted">{{ item['createdAtTime']|qtime }}</small>
																				</h3>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														{% endif %}
													{% endfor %}
												</div>
											{% else %}
												{% include '@WebsiteBundle/empty.html.twig' %}
											{% endif %}
										</div>
									</div>
								</div>
								<div class="col-sm-12 col-lg-4">
									<div class="card">
										<div class="card-header">
											<h2 class="card-title">
												<strong>最新文章</strong>
											</h2>
										</div>
										<div class="card-body">
											{% if newsList %}
												<div class="divide-y">
													{% for item in newsList %}
														<div>
															<div class="row row-deck row-card align-items-end">
																<div class="col-sm-12 col-lg-12 tracking-wide h4 align-self-end">
																	<a href="{{ path('app_news_detail', {id:item['id']}) }}">{{ item['title'] }}</a>
																</div>
																<div class="col-sm-12 col-lg-12  w-100 justify-content-between">
																	<div class="mb-1 text-muted">{{ item['createdAtTime']|qtime }}</div>
																	<small class="text-muted">
																		<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
																			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
																			<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
																			<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
																		</svg>
																		{{ item['viewNumber'] }}</small>
																</div>
															</div>
														</div>
													{% endfor %}
												</div>
											{% else %}
												{% include '@WebsiteBundle/empty.html.twig' %}
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{{ render(path('app_footer')) }}
		</div>
	</div>
{% endblock %}
